<script setup lang='ts'>
import type { FieldValues, PlusColumn } from 'plus-pro-components'

const visible = ref(false)
const values = ref<FieldValues>({})

function handleAddOpen() {
    visible.value = true
}

const columns: PlusColumn[] = [
    {
        label: '是否发送短信',
        prop: 'a2',
        width: 120,
    },
]

const labelWidth = '100'

const dialog = {
    title: '审核',
}

function confirm(values: FieldValues) {
    console.log('🚀 ~ confirm ~ confirm:', confirm, values)
}

function cancel() {
    console.log('🚀 ~ cancel ~ cancel:', cancel)
}

defineExpose({
    handleAddOpen,
})
</script>

<template>
    <PlusDialogForm v-model:visible="visible"
                    v-model="values"
                    :form="{ columns, labelWidth }"
                    :dialog="dialog"
                    :label-width="120"
                    @confirm="confirm"
                    @cancel="cancel"
    >
        <template #dialog-footer="{ handleConfirm, handleCancel }">
            <div style="margin: 0 auto">
                <el-button @click="handleCancel">
                    取消
                </el-button>

                <el-button type="primary"
                           @click="handleConfirm"
                >
                    确定
                </el-button>
            </div>
        </template>
    </PlusDialogForm>
</template>
